<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/9/10
  Time: 15:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <%--<link rel="stylesheet" href="js/bootstrap-fileinput/fileinput.css">--%>
    <link href="js/fileinput-4.3.8.min.css" media="all" rel="stylesheet" type="text/css" />
    <script src="js/jquery-3.3.1.js"></script>
    <%--<script src="js/bootstrap-fileinput/fileinput.js"></script>--%>
    <script src="js/fileinput-4.3.8.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/upload.js"></script>
    <%--<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">--%>
    <%--<link href="http://cdn.bootcss.com/bootstrap-fileinput/4.3.8/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />--%>
    <%--<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>--%>
    <%--<script src="http://cdn.bootcss.com/bootstrap-fileinput/4.3.8/js/fileinput.min.js" type="text/javascript"></script>--%>
    <%--<script href="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>--%>

    <style>
        img{
            width:100px;
            height:100px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <nav class="navbar navbar-default" role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">学生管理系统</a>
                    </div>
                    <div>
                        <ul class="nav navbar-nav">
                            <li ><a href="#">管理员管理</a></li>
                            <li class="active"><a href="#">老师管理</a></li>
                            <li><a href="#">学生管理</a></li>

                        </ul>
                    </div>
                    <div >
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#"><span class="glyphicon glyphicon-user"></span>${user_session.username}</a></li>
                            <li><a href="/logout"><span class="glyphicon glyphicon-log-out"></span> 退出</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
        <div class="col-md-2">
        </div>
    </div>

    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <div class="col-md-8"></div>

        </div>
        <div class="col-md-2">

        </div>
    </div>


 <!--搜索框及表格 -->
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <div class="row" style="margin-bottom: 20px">
                <div class="col-md-6">
                    <div class="input-group">
                        <input type="text" id="search" class="form-control" placeholder="">
                        <span class="input-group-addon" onclick="selectAll()">检索</span>
                    </div>
                </div>
                <div class="col-md-4">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">添加</button>
                </div>

                <div class="col-md-2"></div>
            </div>


            </table>
            <table class="table table-stripe table-bordered table-hover">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>电话</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="bg">
                <tr>
                    <td>Tanmay</td>
                    <td>Bangalore</td>
                    <td>Bangalore</td>
                    <td>Bangalore</td>
                    <td>Bangalore</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-2"></div>
    </div>


    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">管理员信息</h4>
                </div>
                <div class="modal-body">
                    <form role="form">
                        <div class="form-group" id="divId">
                            <label >序号</label>
                            <input type="text" class="form-control" id="id" readonly>
                        </div>
                        <div class="form-group">
                            <label >姓名</label>
                            <input type="text" class="form-control" id="name" placeholder="请输入姓名">
                        </div>
                        <div class="form-group">
                            <label >性别</label>
                            <input type="text" class="form-control" id="sex" placeholder="请输入性别">
                        </div>
                        <div class="form-group">
                            <label >电话号码</label>
                            <input type="text" class="form-control" id="phone" placeholder="请输入电话号码">
                        </div>
                        <div class="form-group">
                            <label >年龄</label>
                            <input type="text" class="form-control" id="age" placeholder="请输入年龄">
                        </div>

                        <div class="form-group">
                            <%--<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">添加图片</button>--%>
                            <%--<div class="row">--%>
                                <%--<div class="col-md-2"><label>头像：</label></div>--%>
                                <%--<div class="col-md-10">--%>
                                    <%--<!-- name="garbageImg" 自己的封装图片字段 -->--%>
                                    <%--<input name="garbageImg" id="testimg">--%>
                                    <%--&lt;%&ndash;<input type="file" class="projectfile" accept="image/*" name="headImg" id="headImg">&ndash;%&gt;--%>
                                    <%--<input id="singleFile" name="file" type="file">--%>
                                <%--</div>--%>
                            <%--</div>--%>
                            <%--<input class="form-control uploadImg2" type="file" name="singleFile"--%>
                                   <%--placeholder="该输入图片">--%>
                            <%--<input type="hidden" id="image">--%>
                        </div>
                        <div class="form-group ">
                            <label class="col-sm-2 control-label">图片</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="file" id="singleFile" name="singleFile"
                                       placeholder="该输入图片">
                                <input type="hidden" id="image">
                            </div>
                        </div>

                        <%--<img src="" id="previewImg">--%>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="addTeacher()">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel2">管理员信息</h4>
                </div>
                <div class="modal-body">
                    <%--<form role="form">--%>


                        <%--<div class="form-group">--%>
                            <%--<div class="row">--%>
                                <%--<h4>图片上传</h4>--%>
                                    <%--<input id="singleFile" name="singleFile" type="file">--%>
                                <%--<hr>--%>
                                <%--<br>--%>
                            <%--</div>--%>
                        <%--</div>--%>

                    <%--</form>--%>
                        <%--<form class="form-horizontal required-validate" action="/common/uploadImg"--%>
                              <%--enctype="multipart/form-data" method="post" >--%>

                            <%--<div class="form-group">--%>
                                <%--<label  class="col-md-1 control-label">图片</label>--%>
                                <%--<div class="col-md-10 tl th">--%>
                                    <%--<input type="file" id="singleFile" name="singleFile" class="projectfile" value="${deal.image}" />--%>
                                    <%--<p class="help-block">支持jpg、jpeg、png、gif格式，大小不超过2.0M</p>--%>
                                <%--</div>--%>
                            <%--</div>--%>
                            <%--<div class="form-group text-center ">--%>
                                <%--<div class="col-md-10 col-md-offset-1">--%>
                                    <%--<button type="submit" class="btn btn-primary btn-lg">保存</button>--%>
                                <%--</div>--%>
                            <%--</div>--%>
                        <%--</form>--%>
                        <%--<div class="form-group">--%>
                            <%--<label>上传图片：</label>--%>
                            <%--<input id="singleFile" type="file" name="singleFile" class="projectfile" >--%>
                            <%--<button type="button" class="btn btn-primary btn-lg" onclick="uploadImg()">保存</button>--%>
                        <%--</div>--%>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="addTeacher()">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


<script>
    var pageIndex = 1;
    var pageSize = 10;
    selectAll();
    function selectAll() {

        var name = $("#search").val();
        $.ajax({
            url: "/selectAll",
            data: {
                name: name,
                pageIndex: pageIndex,
                pageSize:pageSize
            },
            method:"get",
            success: function (data) {
                html = "";
                //$("#test").bootstrapTable("load", data);

                //接收list
                $.each(data, function (index, res) {
                    html += '<tr>' +
                        '<td>' + res.id + '</td>' +
                        '<td>' + res.name + '</td>' +
                        '<td>' + res.sex + '</td>' +
                        '<td>' + res.phone + '</td>' +
                        '<td>' + res.age + '</td>' +
                        '<td>' +
                        '<button type="button" class="btn btn-info" onclick="initEditTeacher('+res.id + ')" data-toggle="modal" data-target="#myModal"> 修改</button>' +
                        '<button type="button" class="btn btn-danger" onclick="deleteTeacher(' + res.id  + ')"> 删除</button>' +
                        '</td>' +
                        '</tr>'
                })
                $("#bg").html(html);
            }
        })
    }

    //添加操作
    function addTeacher() {
        var id = $('#id').val();
        var name = $('#name').val();
        var sex = $('#sex').val();
        var phone  = $('#phone').val();
        var age  = $('#age').val();

        //
        if (id.length !== 0) {
            //编辑处理
            //editTeacher();
            editTeacherJson();
            return;
        }
        //提交后台处理
        $.ajax(
            {
                url: "/insert",
                data: {
                    name: name,
                    sex: sex,
                    phone: phone,
                    age: age
                },
                type:"post",
                success:function (data) {
                    alert("处理成功");
                    $('#myModal').modal("hide");
                    selectAll();
                }
            }
        )
    }

    //初始化编辑框
    function initEditTeacher(id) {
        console.log("edit");

        $.ajax({
            url: "/selectOne", //请求的路径
            data: {
                id: id
            },
            type:"get",
            success:function (data) {
                console.log(data);
                //var user = JSON.parse(data);
                //赋值
                $('#id').val(data.id);
                $('#name').val(data.name);
                $('#sex').val(data.sex);
                $('#phone').val(data.phone);
                $('#age').val(data.age);
                $('#previewImg').attr("src", "img/profile.jpg");

                $(".file-drop-zone-title").html('<img src="img/profile.jpg" width="360px">')

                $("#divId").show();
            }
        })
    }

    //编辑操作
    function editTeacher() {
        var id = $('#id').val();
        var name = $('#name').val();
        var sex = $('#sex').val();
        var phone  = $('#phone').val();
        var age  = $('#age').val();

        //提交后台处理
        $.ajax(
            {
                url: "/tupdate",
                data: {
                    id: id,
                    name: name,
                    sex: sex,
                    phone: phone,
                    age: age
                },
                type:"post",
                success:function (data) {
                    alert("更新处理成功");
                    $('#myModal').modal("hide");
                    selectAll();
                } ,
                error:function (data) {
                    alert("更新失败" + data);
                }
            }
        )
    }
    //编辑操作
    function editTeacherJson() {
        var id = $('#id').val();
        var name = $('#name').val();
        var sex = $('#sex').val();
        var phone  = $('#phone').val();
        var age  = $('#age').val();

        //提交后台处理
        $.ajax(
            {
                url: "/update",
                data: JSON.stringify({
                    id: id,
                    name: name,
                    sex: sex,
                    phone: phone,
                    age: age
                }),
                type:"post", //默认: "GET") 请求方式 ("POST" 或 "GET")
                // dataType:"json",预期服务器返回的数据类型
                //'application/x-www-form-urlencoded';发送信息至服务器时内容编码类型
                contentType:"application/json;charset=UTF-8",
                success:function (data) {
                    alert("更新处理成功");
                    $('#myModal').modal("hide");
                    selectAll();
                } ,
                error:function (data) {
                    alert("更新失败" + data);
                }
            }
        )
    }

    //删除方法
    function deleteTeacher(id) {

        if (!confirm("确认要删除该记录吗?")) {
            return;
        }
        $.ajax({
            url: "/delete",
            data: {
                id: id
            },
            method:"post",
            success: function () {
                alert("删除成功");
                location.reload();
                selectAll();
            }
        })
    }

    // 打开模态对话框
    $('#myModal').on('show.bs.modal', function () {
        $('#id').val("");
        $('#name').val("");
        $('#sex').val("");
        $('#phone').val("");
        $('#age').val("");
        $("#divId").hide();
    })


    $(function(){
        initUploadImg();
    })

    function uploadImg() {
        //$('#singleFile').fileinput('upload');
    }

    function initUploadImg(){
        var url = "/common/uploadImg";
        // 单图上传
        $("#singleFile").fileinput({
            language: "zh",
            uploadUrl: url,
            uploadAsync: false, //默认异步上传,这里设置了同步
            showUpload: false, //是否显示上传按钮
            showRemove: true, //显示移除按钮
            showPreview: true, //是否显示预览
            showCancel:true,   //是否显示文件上传取消按钮。默认为true。只有在AJAX上传过程中，才会启用和显示
            browseClass: "btn btn-primary", //按钮样式
            showCaption: true,//是否显示标题
            //overwriteInitial: false,                        		// 覆盖初始预览内容和标题设置

            previewClass:"uploadPreview",
            dropZoneEnabled: true,//是否显示拖拽区域
            maxFileSize: 2000,
            maxFileCount: 1, //表示容许同时上传的最大文件个数
            minFileCount: 1,
            reviewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            allowedFileExtensions: ["jpg", "png", "gif", "bmp", "jpeg", "JPG", "PNG", "GIF", "BMP", "JPEG"],//接收的文件后缀
            //allowedPreviewTypes: ['image'],
            //allowedFileTypes: ['image'],
            //autoReplace: true, //是否可替换
            enctype: 'multipart/form-data',
            layoutTemplates:{
                actionUpload:'',//去除上传预览缩略图中的上传图片
                actionZoom:'',   //去除上传预览缩略图中的查看详情预览的缩略图标
                actionDownload:'', //去除上传预览缩略图中的下载图标
                actionDelete:'', //去除上传预览的缩略图中的删除图标
            },//对象用于渲染布局的每个部分的模板配置。您可以设置以下模板来控制窗口小部件布局.eg:去除上传图标
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",//字符串，当文件数超过设置的最大计数时显示的消息 maxFileCount。默认为：选择上传的文件数（{n}）超出了允许的最大限制{m}。请重试您的上传！
            // previewSettings: {            image: {width: "100px", height: "100px"},        },

            //uploadLabel: "上传",                         			// 上传按钮内容
            //browseLabel: '选择',                            		// 浏览按钮内容
            //validateInitialCount: true,
            // fileActionSettings: {                               // 在预览窗口中为新选择的文件缩略图设置文件操作的对象配置
            //     showRemove: false,                                   // 显示删除按钮
            //     showUpload: false,                                   // 显示上传按钮
            //     showDownload: false,                            // 显示下载按钮
            //     showZoom: false,                                    // 显示预览按钮1111
            //     showDrag: false,                                        // 显示拖拽111
            //     // removeIcon: '<i class="fa fa-trash"></i>',   // 删除图标
            //     // uploadIcon: '<i class="fa fa-upload"></i>',     // 上传图标
            //     //uploadRetryIcon: '<i class="fa fa-repeat"></i>'  // 重试图标
            // }
        }).on('filebatchselected',function(event,data,previewId,index){
            console.log("selected");
            //下面的自动上传提交，建议先熟悉下面的文件点击上传
             $(this).fileinput("upload");
        }).on('fileuploaded', function (event, data, previewId, index) {
            console.log("fileuploaded");
            //文件上传提交，后台返回数据前台接受
            var rsp = data.response;
            console.log("return url：" + rsp.url)
            console.log("reutrn fileName：" + rsp.fileName)
            console.log("reutrn newFileName：" + rsp.newFileName)
            console.log("return originalFilename：" + rsp.originalFilename)

            //$('#myModal2').modal("hide");
            $("#previewImg").attr("src", rsp.fileName);
        }).on('fileremoved', function (event, id, index) {
            $("input[name='" + event.currentTarget.id + "']").val('')
        }).on('filebatchuploadsucess', function (event, data, previewId, index) {
            alert("filebatchup");

        }).on('fileuploaderror', function (event,  data, previewId, index) {
            alert("fileuploaderror");
        }).on('filebatchuploadcomplete', function (event, data, files,extra) {
            alert("filebatchuploadcomplete");
        })
    }
</script>
<script>
    function xz() {
        //初始化fileinput
       // $(".file-drop-zone-title").html('可以将图片拖放到这里 …')
    }
    //initFileInput();
    function initFileInput(imgsrc) {
        var obj = '可以将图片拖放到这里 …';
        $(".uploadImg2").fileinput({
            language: 'zh', //设置语言
            dropZoneTitle: obj, //'可以将图片拖放到这里 …',
            uploadUrl: "/common/uploadImg", //上传的地址
            uploadExtraData: function(previewId, index) {   //该插件可以向您的服务器方法发送附加数据。这可以通过uploadExtraData在键值对中设置为关联数组对象来完成。所以如果你有设置uploadExtraData={id:'kv-1'}，
                var id = $('#id').val();
                return {seriesId: id};
            },
            allowedFileExtensions: ['jpg','png','jpeg'],//接收的文件后缀
            uploadAsync: true, //默认异步上传
            showUpload: false, //是否显示上传按钮
            showRemove: true, //显示移除按钮
            showPreview: true, //是否显示预览
            showCancel:true,   //是否显示文件上传取消按钮。默认为true。只有在AJAX上传过程中，才会启用和显示
            showCaption: true,//是否显示文件标题，默认为true
            browseClass: "btn btn-primary", //文件选择器/浏览按钮的CSS类。默认为btn btn-primary
            previewClass:"uploadPreview",
            dropZoneEnabled: true,//是否显示拖拽区域
            minImageWidth: 50, //图片的最小宽度
            minImageHeight: 50,//图片的最小高度
            maxImageWidth: 200,//图片的最大宽度
            maxImageHeight: 200,//图片的最大高度
            maxFileSize: 1024,//单位为kb，如果为0表示不限制文件大小
            minFileCount: 1, //每次上传允许的最少文件数。如果设置为0，则表示文件数是可选的。默认为0
            maxFileCount: 1, //每次上传允许的最大文件数。如果设置为0，则表示允许的文件数是无限制的。默认为0
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",//当检测到用于预览的不可读文件类型时，将在每个预览文件缩略图中显示的图标。默认为<i class="glyphicon glyphicon-file"></i>
            // previewSettings: {            image: {width: "400px", height: "400px"},        },
            layoutTemplates:{
                actionUpload:'',//去除上传预览缩略图中的上传图片
                actionZoom:'',   //去除上传预览缩略图中的查看详情预览的缩略图标
                actionDownload:'', //去除上传预览缩略图中的下载图标
                actionDelete:'', //去除上传预览的缩略图中的删除图标
            },//对象用于渲染布局的每个部分的模板配置。您可以设置以下模板来控制窗口小部件布局.eg:去除上传图标
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",//字符串，当文件数超过设置的最大计数时显示的消息 maxFileCount。默认为：选择上传的文件数（{n}）超出了允许的最大限制{m}。请重试您的上传！
        }).on('filebatchpreupload', function(event, data) { //该方法将在上传之前触发
            console.log(5577)
            // console.log(data)
            var id = $('#id option:selected').val();
            if(id == 0){
                return {
                    message: "请选择", // 验证错误信息在上传前要显示。如果设置了这个设置，插件会在调用时自动中止上传，并将其显示为错误消息。您可以使用此属性来读取文件并执行自己的自定义验证
                    data:{} // any other data to send that can be referred in `filecustomerror`
                };
            }
        }).on("change", function() {
            console.log(89)
            // 清除掉上次上传的图片
            //$(".uploadImg").find(".file-drop-zone-title").html("");
            $(".uploadPreview").find(".file-preview-frame:first").remove();
            $(".uploadPreview").find(".kv-zoom-cache:first").remove();

        }).on("filebatchselected", function(e, files) {
            $(this).fileinput("upload");             // 文件选择完直接调用上传方法。
        })

    }
    //fileuploaded此事件仅针对ajax上传触发，并在每个缩略图文件上传完成后触发。此事件仅针对ajax上传并在以下情况下触发：
    // 当点击每个预览缩略图中的上传图标并且文件上传成功时，或者当你有 uploadAsync设置为true您已触发批量上传。在这种情况下，
    // fileuploaded每一个人选择的文件被上传成功后，触发事件。
    var id_str=0;
    $('.uploadImg2').on('fileuploaded', function(event, data, previewId, index) {
        console.log(666)
        console.log(data)
        // if(typeof(data.response.data.src) != 'undefined'){
        //     id_str = data.response.data.src;
        //     $("#image").val(data.response.data.src);
        // }
        var rsp = data.response;
        console.log("return url：" + rsp.url)
        console.log("reutrn fileName：" + rsp.fileName)
        console.log("reutrn newFileName：" + rsp.newFileName)
        id_str = rsp.fileName;
        $("#image").val(rsp.fileName);
    });
    // filebatchuploadcomplete此事件仅在ajax上传和完成同步或异步ajax批量上传后触发。
    $('.uploadImg2').on('filebatchuploadcomplete',function (event, data, files,extra) {
        console.log(888)
        console.log(data)
        // if(id_str.length == 0){
        //     // layer.msg('上传失败', {icon: 0});//弹框提示
        //     alert('上传失败')
        //     return false;
        // }
        setTimeout(function(){ //执行延时关闭
            //closeSelf();
            //$(".uploadImg").find(".file-drop-zone-title").html("");
            //$('#uploadImg').fileinput('refresh', {showCaption: false})
            //$('.uploadImg').fileinput('clear');

        },5000);
    });

</script>
</body>
</html>
